import React from './react';
import ReactDom from './react-dom';

/**
 * 1.不要直接修改state,直接修改不能刷新页面,setState包含了刷新界面的操作
 * 就是让真实DOM和虚拟DOM保持一致
 * 2. setState的更新可能会被合并：setstate里传的新对象会跟老对象进行合并
 * 3. setState的更新可能是异步的：在事件处理函数中setState的时候并不会直接修改状态，而是先把partialState放入一个数组缓存起来
 * 等事件执行结束了再统一更新
 */

class Counter extends React.Component {
  constructor(props){
    super(props);
    this.state={name:'计数器', number: 0}
  }
  handleClick = ()=>{
    // this.setState({number: this.state.number+ 1})
    // console.log(this.state.number,'first');
    // this.setState({number: this.state.number+1});
    // console.log(this.state.number,'second')
    this.setState(prev=>({number:prev.number+1}),()=>{
      console.log(this.state.number,'one')
    })
    console.log(this.state.number,'third');
    this.setState(prev=>({number:prev.number+1}),()=>{
      console.log(this.state.number,'two');
    })
    console.log(this.state.number,'fourth');
  }
  render(){
    return <div>
      <h1>{this.state.name}: {this.state.number}</h1>
      <button onClick={this.handleClick}>+</button>
    </div> 
  }
} 
ReactDom.render(
  <Counter/>,
  document.getElementById('root')
)
